<template>
  <el-container style="height: 570px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color:  #e3d3de;border-radius: 7px">
      <el-menu class="menu_style" router>
        <template v-for="(item,index) in $router.options.routes">
          <el-submenu :index="index+''" 
                            v-if="item.show" 
                            :key="item.path">
            <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
            <template v-for="(item2) in item.children">
              <el-menu-item
                          :index="item2.path"
                          :class="$route.path===item2.path?'is-active':''"
                           v-if="item2.show" 
                          :key="item2.path">
              <i :class="item2.iconCls"></i>
              {{item2.name}}
            </el-menu-item>
            </template>
            
          </el-submenu>
        </template>
        
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="font-size: 12px;background-color: #e3d3de; border-radius: 7px">
        <div class="title_style"><h1 class="threed" >人才招聘网站后台管理</h1></div>
        <div class="setting_icon_style">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px;font-size: 19px; color: #106ee8"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="toReception">跳转到前台</el-dropdown-item>
              <el-dropdown-item @click.native="handleFullScreen">{{fullscreen?'取消全屏':'全屏'}}</el-dropdown-item>
              <el-dropdown-item @click.native="exit" style="border: none">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="threed_user">{{loginName}}</span>
        </div>
      </el-header>

      <el-main class="main_container_style">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getStore, removeStore, } from "../../storage/storage";
import {getLoginInfo} from "../../api/backstage";
export default {
  name: "BackIndex",
  data(){
    return {
      loginName: '',
      fullscreen: false, // 是否全屏
    }
  },
  methods:{
    // 跳转到前台
    toReception(){
      this.$router.push("/")
    },

    // 退出
    exit () {
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeStore("token");
        removeStore("password");
        this.$router.push("/backstage/login")
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: 900,
          message: '已取消退出'
        });
      });
    },

    getLoginInfoFunc(){
      // 获取登陆信息
      const param = {
        account: getStore("account"),
      }
      const _this = this;
      getLoginInfo(param).then(res=>{
        _this.loginName = res.data.data;
      }).catch(err=>{
        console.log(err)
      })
    },

    // 全屏事件
    handleFullScreen(){
      if(this.fullscreen){
        if(document.exitFullscreen){
          document.exitFullscreen();
        }else if(document.webkitCancelFullScreen){
          document.webkitCancelFullScreen(); // Safari Chrome
        }else if(document.mozCancelFullScreen){
          document.mozCancelFullScreen(); // 火狐
        }else if(document.msExitFullScreen){
          document.msExitFullScreen(); // IE
        }
      }else{
        let element = document.documentElement;
        if(element.requestFullscreen){
          element.requestFullscreen();
        }else if(element.webkitRequestFullScreen){
          element.webkitCancelFullScreen(); // Safari Chrome
        }else if(element.mozRequestFullScreen){
          element.mozRequestFullScreen(); // 火狐
        }else if(element.msRequestFullScreen){
          element.msRequestFullScreen(); // IE
        }
      }
      this.fullscreen = !this.fullscreen;
    },

    checkToken(){
      var token = getStore("token");
      if (token === null || token === '') {
        this.$router.push("/reception/login");
        this.$message.info("请先登陆！");
      }
    },

  },

  created() {
    // 获取登陆信息
    this.getLoginInfoFunc();

    // 判断token是否存在，如果不存在就去登陆页面
    this.checkToken();

  },


}
</script>

<style scoped>

.main_container_style{
  background-color: rgb(230, 238, 245);
  opacity: 0.8;
  border-radius: 15px;
}

.menu_style{
  background-color: #e3d3de;
  border-radius: 10px;
}

.threed{
  color:  #7d2f61;
  font-size: 30px;
  margin-top: 0;
  letter-spacing: 8px;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
}

.threed_user{
  color: #451b36;
  font-size:16px;
  margin-top: 0;
  font-weight: bold;
  letter-spacing: 3px;
}

.title_style{
  margin-left: 290px;
  width: 400px;
  height: 60px;
  float: left;
}

.setting_icon_style{
  float: right;
  max-width: 280px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 50px;
}

.el-aside {
  color: #333;
}
</style>